import HttpRepositiry from "@/repositorys/HttpRepositiry";
import { useAccount } from "@/stores/account";
import { useCommentBatch, useCommentLoop } from "@/stores/comment";
import { useSession } from "@/stores/sesstion";
import { defineComponent, ref } from "vue";
import styles from './styles.module.css';
import Info from '@/components/info';
import Appoint from '@/components/appoint';
import Loop from '@/components/loop';
import Batch from '@/components/batch';
import Timer from '@/components/timer';
import Manually from '@/components/manually';
import Outer from '@/components/outer';
import LiveInfo from '@/components/liveInfo';
import Monitor from '@/components/monitor';
import Log from '@/components/log';
import { getUserInfo } from "@/utils/ipc";

export default defineComponent({
    setup(_props, _ctx) {
        const account = useAccount();
        const session = useSession();
        return () => {
            return (
                <div class={["container app-wrap app-wrap-column", styles.app]}>
                    <Info class={styles.header}></Info>

                    <el-row class={["app-flex container", styles.body]}>
                        <el-col span={8} class={[styles.col]}>
                            <div class={styles.colBody}>
                                <div >
                                    <el-button size="small" type="primary" onClick={async () => {
                                        const info = await getUserInfo();
                                        account.add(info);
                                    }}>添加账号</el-button>
                                    <el-button
                                        disabled={session.isExpire}
                                        size="small"
                                        type="primary"
                                        onClick={() => {
                                            account.pullAccounts();
                                        }}>云端获取账号</el-button>
                                </div>
                                <Appoint > </Appoint>
                                <div class="app-divider o"></div>
                                <Outer class="o"></Outer>
                            </div>

                        </el-col>
                        <el-col span={9} class={[styles.col, 'o']}>
                            <div class={["app-wrap app-wrap-column container", styles.colBody]}>
                                <Loop></Loop>
                                <div class="app-flex"></div>
                                <div class="app-divider"></div>
                                <Batch></Batch>
                                <div class="app-flex"></div>
                                <div class="app-divider"></div>
                                <Manually></Manually>
                                <div class="app-flex"></div>
                                <div class="app-divider"></div>
                                <Timer></Timer>
                                <div class="app-flex"></div>
                            </div>
                        </el-col>
                        <el-col span={7} class={[styles.col, 'o']}>
                            <div class={['app-wrap app-wrap-column', styles.colBody]}>
                                <Monitor></Monitor>
                                <Log class="app-flex"></Log>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            );
        }
    },
});










